<template>
  <div
    style="
      width: 100%;
      height: 100%;
      position: absolute;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
      background: #111;
    "
  >
    <el-container style="height: 100%">
      <el-aside
        width="250px"
        style="
          display: flex;
          flex-direction: column;
          background: #1c1c1c;
          align-items: center;
        "
      >
        <img
          src="../assets/logo.png"
          style="width: 100px; height: 100px; margin: 10px 0"
          alt=""
        />
        <div style="color: #c1c1c1; margin: 10px 0">深工融媒体播控系统</div>
        <div
          @click="selectNav(0)"
          style="
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
            padding: 20px 0;

            cursor: pointer;
          "
          :style="{
            background: selectedNav == 0 ? '#27c48f' : null,
          }"
        >
          <img
            src="../assets/首页预览.png"
            style="width: 20px; height: 20px"
            alt=""
          />
          <div
            style="
              width: 120px;
              text-align: left;
              margin-left: 10px;
              color: #dcdcdc;
            "
          >
            首页预览
          </div>
        </div>
        <div
          @click="selectNav(1)"
          style="
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
            padding: 20px 0;
            cursor: pointer;
          "
          :style="{
            background: selectedNav == 1 ? '#27c48f' : null,
          }"
        >
          <img
            src="../assets/资源列表.png"
            style="width: 20px; height: 20px"
            alt=""
          />
          <div
            style="
              width: 120px;
              text-align: left;
              margin-left: 10px;
              color: #dcdcdc;
            "
          >
            资源列表
          </div>
        </div>
        <div
          @click="selectNav(2)"
          style="
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
            padding: 20px 0;
            cursor: pointer;
          "
          :style="{
            background: selectedNav == 2 ? '#27c48f' : null,
          }"
        >
          <img
            src="../assets/节目单设置.png"
            style="width: 20px; height: 20px"
            alt=""
          />
          <div
            style="
              width: 120px;
              text-align: left;
              margin-left: 10px;
              color: #dcdcdc;
            "
          >
            节目单设置
          </div>
        </div>
        <div
          @click="selectNav(3)"
          style="
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
            padding: 20px 0;
            cursor: pointer;
          "
          :style="{
            background: selectedNav == 3 ? '#27c48f' : null,
          }"
        >
          <img
            src="../assets/系统配置.png"
            style="width: 20px; height: 20px"
            alt=""
          />
          <div
            style="
              width: 120px;
              text-align: left;
              margin-left: 10px;
              color: #dcdcdc;
            "
          >
            系统配置
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-header
          style="display: flex; justify-content: center; align-items: center"
        >
          <div
            style="
              width: 99%;
              height: 80%;
              background: #1c1c1c;
              border: solid #4e4e4e 2px;
              border-radius: 5px;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div
              style="
                height: 85%;
                width: 50%;
                margin-left: 5px;
                background: #282828;
                display: flex;
                align-items: center;
                border-radius: 5px;
              "
            >
              <img
                src="../assets/search.png"
                style="width: 15px; height: 15px"
                alt=""
              />
              <input
                placeholder="搜索节目单"
                style="
                  background: transparent;
                  outline: 0;
                  border: 0;
                  color: #c1c1c1;
                "
              />
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                color: #c1c1c1;
                margin-right: 20px;
              "
            >
              
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-left: 5px;
                  cursor: pointer;
                  user-select: none;
                "
              >
                <img
                  src="../assets/user.png"
                  style="width: 15px; height: 15px"
                  alt=""
                />
                <div
                  style="
                    font-size: 15px;
                    margin-bottom: 3px;
                    margin-left: 5px;
                    cursor: pointer;
                  "
                >
                  {{ user_name }}
                </div>
              </div>
              <div
                @click="logout"
                style="
                  display: flex;
                  align-items: center;
                  margin-left: 5px;
                  cursor: pointer;
                  user-select: none;
                "
              >
                <img
                  src="../assets/logout.png"
                  style="width: 15px; height: 15px"
                  alt=""
                />
                <div
                  style="
                    font-size: 15px;
                    margin-bottom: 3px;
                    margin-left: 5px;
                    cursor: pointer;
                  "
                >
                  退出登录
                </div>
              </div>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view style="width: 100%; height: 100%" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      user_name: null,
      selectedNav: null,
    };
  },
  methods: {
    selectNav(index) {
      this.selectedNav = index;
      switch (index) {
        case 0:
          this.$router.push("/preview");
          break;
        case 1:
          this.$router.push("/ResourceList");
          break;
        case 2:
          this.$router.push("/playListConfiguration");
          break;
        case 3:
          this.$router.push("/systemConfiguration");
          break;

        default:
          break;
      }
    },
    async startServe() {
      let res = await request({
        url: "/system/api/startServer/" + localStorage.getItem("user_name"),
        method: "GET",
      });
      if (res.data.status == 200 && res.data.data.result) {
        alert("启动成功");
      }
    },
    async stopServer() {
      let res = await request({
        url: "/system/api/stopServer/" + localStorage.getItem("user_name"),
        method: "GET",
      });
      if (res.data.status == 200 && res.data.data.result) {
        alert("关闭成功");
      }
    },
    async logout() {
      let res = await request({
        url: "/user/api/logout/" + localStorage.getItem("user_name"),
        method: "GET",
      });
      if (res.data.status == 200 && res.data.data.result) {
        alert("注销成功");
      }
    },
  },
  mounted() {
    this.user_name = localStorage.getItem("user_name");
    console.log(this.$route.path);
    switch (this.$route.path) {
      case "/preView":
        this.selectedNav = 0;
        break;
      case "/ResourceList":
        this.selectedNav = 1;
        break;
      case "/playListConfiguration":
        this.selectedNav = 2;
        break;
      case "/systemConfiguration":
        this.selectedNav = 3;
        break;

      default:
        break;
    }
  },
};
</script>

<style scoped>
</style>